<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ page import="org.codehaus.jackson.map.ObjectMapper" %>
<%@ page import="org.joda.time.Days" %>
<%@ page import="org.belkodevelop.report.domen.PatientReport" %>
<%@ page import="org.joda.time.DateTime" %>
<%@ page import="org.joda.time.Years" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    ObjectMapper mapper = new ObjectMapper();

    PatientReport patientReport = (PatientReport)request.getAttribute("patientReport");

    String jsonPatientReport = mapper.writeValueAsString(request.getAttribute("patientReport"));

    Years age = Years.yearsBetween(new DateTime(patientReport.getPatient().getBirthDate()), new DateTime());
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>report</title>
    <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <script>
        var patientReport = <%=jsonPatientReport %>;
    </script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

        google.load("visualization", "1", {packages:['corechart','geochart','table']});
        google.setOnLoadCallback(function() {
            $(function() {
                function buildChartSAD_DAD() {
                    var data = [];
                    for (var i in patientReport.journalItemList) {
                        data.push([new Date(patientReport.journalItemList[i].date), patientReport.journalItemList[i].sad, patientReport.journalItemList[i].dad])
                    }

                    var dataTable = new google.visualization.DataTable();
                    dataTable.addColumn('datetime', 'Дата');
                    dataTable.addColumn('number', 'САД');
                    dataTable.addColumn('number', 'ДАД');
                    dataTable.addRows(data);

                    var dataView = new google.visualization.DataView(dataTable);

                    var chart = new google.visualization.LineChart(document.getElementById('divChartSadDad'));
                    var options = {
                        width: 1200, height: 500,
                        legend: {position: 'bottom'},
                        pointSize: 5,
                        vAxis:  {title: 'мм. рт. ст.'},
                        title: "Артериальное давление"
                    };
                    chart.draw(dataView, options);
                }

                function buildChartPulse() {
                    var data = [];
                    for (var i in patientReport.journalItemList) {
                        data.push([new Date(patientReport.journalItemList[i].date), patientReport.journalItemList[i].pulse])
                    }

                    var dataTable = new google.visualization.DataTable();
                    dataTable.addColumn('datetime', 'Дата');
                    dataTable.addColumn('number', 'Пульс');

                    dataTable.addRows(data);

                    var dataView = new google.visualization.DataView(dataTable);


                    var chart = new google.visualization.LineChart(document.getElementById('divChartPulse'));
                    var options = {
                        width: 1200, height: 500,
                        legend: {position: 'bottom'},
                        pointSize: 5,
                        vAxis:  {title: 'ударов в мин.', position: 'top'},
                        title: "Пульс"
                    };
                    chart.draw(dataView, options);
                }

                buildChartSAD_DAD();
                buildChartPulse();
            });
        });

    </script>
</head>

<body>
<div class="container">

    <div>
        <h1>Отчет</h1>
        <p class="lead">c <fmt:formatDate value="${patientReport.start}" pattern="dd.MM.yy" /> по <fmt:formatDate value="${patientReport.end}" pattern="dd.MM.yy" /></p>
    </div>

    <table class="table">
        <tbody>
        <tr>
            <td>ФИО:</td>
            <td colspan="3">${patientReport.patient.fullName}</td>
        </tr>
        <tr>
            <td>Email:</td>
            <td colspan="1">${patientReport.patient.email}</td>

            <td>Телефон:</td>
            <td colspan="1">${patientReport.patient.telephoneNumber}</td>
        </tr>
        <tr>
            <td>Возраст: <%=age.getYears()%>
            </td>

            <td>Пол:
            ${patientReport.patient.sex == 'MAN' ? 'М' : 'Ж'}</td>

            <td>Вес:
            ${patientReport.patient.weight} кг.</td>

            <td>Рост:
            ${patientReport.patient.growth} см.</td>
        </tr>
        </tbody>
    </table>

    <div id="divChartSadDad" style="width: 1200px; height: 500px;"></div>
    <div id="divChartPulse" style="width: 1200px; height: 500px;"></div>

</div> <!-- /container -->

</body>

</html>